<template>
	<div class="evaluation-history">
        <Detail :close="() => this.showDetailPage=false" v-show="showDetailPage" :cur="cur" />
        <div class="top" v-show="!showDetailPage">
			<Row :gutter="10" justify="center" >
				<Col span="4">
					<Input v-model="keyWord" placeholder="输入会员卡号/姓名/手机号码" />
				</Col>
				<Col span="4">
					<Select placeholder="全部评估类型" v-model="type">
						<Option v-for="item in GLOBAL.evaluationTypeOptionList" :value="item.value" :key="item.value">{{ item.text }}</Option>
					</Select>
				</Col>
                <Col span="16">
                    <div style="display:flex;align-items:center;">
                        <span class="mr10 ml10">评估日期: </span>
                        <DatePicker @on-change="t=>daterange=t" :value="daterange" type="datetimerange" placeholder="请选择评估日期"></DatePicker>
                        <Button class="ml20" type="success" @click="search">搜索</Button>
                        <Button class="ml20" type="primary" ghost @click="reset">清空</Button>
                    </div>
				</Col>
			</Row>
		</div>
		<div v-show="!showDetailPage">
			<div>
				<Table
					:loading="loading"
					highlight-row
					ref="currentRowTable"
					:columns="tableColumns"
					:data="items"
				>
					<template slot-scope="{ row }" slot="sex">
                        <span v-if="Number(row.sex)===1">男</span>
                        <span v-else-if="Number(row.sex)===2">女</span>
                        <span v-else>-</span>
					</template>

					<template slot-scope="{row}" slot="createTime">
						<span>{{row.createTime | YMDHMS}}</span>
					</template>

                    <template slot-scope="{row}" slot="birthday">
						<span>{{row.birthday | AGE}}</span>
					</template>

					<template slot-scope="{row}" slot="updateTime">
						<span>{{row.updateTime | YMDHMS}}</span>
					</template>

                    <template slot-scope="{row}" slot="addTime">
						<span>{{row.addTime | YMDHMS}}</span>
					</template>

					<template slot-scope="{row}" slot="action">
						<a href="javascript:;" class="mr20" @click="getDetail(row)">查看详情</a>
                        <router-link :to="{
                            path: '/evaluation/' + row.type,
                            query: {
                                id: row.customerId,
                            }
                        }">重新评估</router-link>
					</template>
				</Table>
                <Row class="pagination">
                    <Col align="right">
                        <Page :current="page" :total="totalNum" show-total @on-change="pageChange" />
                    </Col>
                </Row>
			</div>
		</div>
	</div>
</template>
<script>

import { evaluationPageQueryList } from '@api/evaluation.js'
import {  templateFollowAdd, templateFollowUpdate, templateFollowDelete } from '@api/followTemplate.js'
import Detail from './detail.vue'
export default {
	data() {
		return {
            //search
            keyWord: "",
            type: "",
            daterange: [],
            showDetailPage: false,
            cur: {},
			loading: false,
			items: [],
			page: 1,
			pageSize: 10,
			totalNum: 0,
			tableColumns: [
                {
                    width: 170,
					title: '姓名',
					key: 'customerName'
                },
                {
					title: '性别',
                    width: 170,
					slot: 'sex'
                },
                {
					title: '年龄',
                    width: 170,
					slot: 'birthday'
                },
				{
					title: '评估类型',
                    key: 'name',
                    width: 170,
                },
                {
                    width: 170,
					title: '手机号码',
					key: 'mobile'
                },
                {
					title: '评估时间',
                    width: 170,
					slot: 'addTime'
                },
                {
                    width: 170,
					title: '评估结果',
					key: 'result'
				},
                
				{
					title: '操作',
					slot: 'action',
					width: 250,
                },
                {
					title: ' ',
					key: '',
					align: '',
				}
			]
		}
    },
    components: {Detail},
	mounted() {
        this.evaluationPageQueryList()
	},
	computed: {
		alertTitle() {
			return this.editedIndex === -1 ? '新增' : '查看'
		}
	},
	methods: {
        search() {
            this.evaluationPageQueryList()
        },
        reset(){
            this.keyWord= ""
            this.type= ""
            this.daterange= []
            this.page = 1;
        },
        getDetail(row){
            this.cur = row;
            this.showDetailPage = true;
        },
		pageChange(page) {
			if (this.loading) {
				return
			}
			this.page = page
			this.evaluationPageQueryList()
			console.log('page>', page)
		},
		async update(item) {
			const { id } = item
			this.editedIndex = item._index
			this.editedItem = Object.assign({}, item)
			this.showDrawer = true
		},
		create() {
			this.editedIndex = -1
			this.editedItem = Object.assign({}, this.defaultItem)
			this.showDrawer = true
		},
        remove(item, idx) {
			//done this.close();
			const { templateName, id } = item
			this.removeLoading || (this.removeLoading = true)
			this.$Modal.confirm({
				title: '删除',
				content: `是否删除模板: ${templateName}?`,
				onOk: async () => {
					const res = await evaluationPageQueryList({ id })
					this.modal(res, '删除')
					this.evaluationPageQueryList()
					this.$Modal.remove()
					this.removeLoading = false
				}
			})
		},
		async save() {
			console.log('this.$Modal-->', this.$Modal)
			if (this.editedIndex > -1) {
                console.log('update...')
				const {id, templateType, templateName, templateContent } = this.editedItem
				this.updateLoading || (this.updateLoading = true)
				const res = await templateFollowUpdate({ id, templateType, templateName, templateContent})
				this.updateLoading = false
				this.modal(res)
			} else {
				console.log('create...')
				const { templateType, templateName, templateContent } = this.editedItem
				this.createLoading || (this.createLoading = true)
				const res = await templateFollowAdd({ templateType, templateName, templateContent })
				this.createLoading = false
				this.modal(res)
				//create
			}
			this.evaluationPageQueryList()
			this.close()
		},
		modal(res, title) {
			if (res.code === '0') {
				this.$Modal.success({
					title: title || this.alertTitle,
					content: res.data
				})
			} else {
				this.$Modal.warning({
					title: title || this.alertTitle,
					content: res.errMsg
				})
			}
		},
		close() {
			this.showDrawer = false
			setTimeout(() => {
				this.editedItem = Object.assign({}, this.defaultItem)
				this.editedIndex = -1
			}, 10)
		},
		evaluationPageQueryList() {
            const {keyWord,type,daterange, page, pageSize, loading } = this
            const [beginTime,endTime] = daterange;
			if (loading) return
			this.loading = true
			evaluationPageQueryList({
                keyWord,
                type,
                beginTime,endTime,

				page,
				pageSize
			})
				.then(res => {
					this.loading = false
					console.log('res roles->', res)
					if (res.code === '0') {
						const { currentPage, isMore, items, pageSize, totalNum, totalPage } = res.data
						;(this.items = items), (this.page = currentPage), (this.totalNum = totalNum)
						console.log('this.items->', this.items)
					} else {
						this.$Modal.warning({
							title: '查询列表',
							content: res.errMsg
						})
					}
				})
				.catch(err => {
					this.loading = false
				})
		}
	},
	watch: {
		showDrawer(after) {
			after || this.close()
		}
	}
}
</script>
<style scoped>
.evaluation-history{
    position: relative;
    height: 100%;
    background-color: #fff;
}
</style>